<!-- @format -->

<!--
 - MineAdmin is committed to providing solutions for quickly building web applications
 - Please view the LICENSE file that was distributed with this source code,
 - For the full copyright and license information.
 - Thank you very much for using MineAdmin.
 -
 - @Author X.Mo<root@imoi.cn>
 - @Link   https://gitee.com/xmo/mineadmin-vue
-->
<template>
	<div class="flex justify-between home-page-title">
		<div class="ma-content-block rounded-sm flex justify-between w-full ">
			<div class="datetime ml-5 flex">
				<span
					v-for="(item, index) in tags"
					:key="index"
					@click="changeTime(index)"
					:class="{ active: index == currentTag }"
				>
					{{ item }}
				</span>
				<!-- <a-range-picker
					style="width: 268px"
					v-model="rangeValue"
					@change="onChange"
				>
					<span
						@click="changeTime(tags.length)"
						:class="{ active: currentTag == tags.length }"
					>
						累计
					</span>
				</a-range-picker> -->
			</div>
		</div>
	</div>
</template>

<script setup>
	import { ref, onMounted, inject } from "vue";
	// 标签
	const tags = ref(["今日",  "本月", "累计"]);
	// 当前标签
	const currentTag = ref(0);
	// 提供的标题数据
	const homeTimeText = inject("homeTimeText");
	// 选中的时间
	const rangeValue = inject("rangeValue");
	// 当前时间
	const newDate = new Date();
	// 当年
	const newYear = newDate.getFullYear();
	// 当月
	const newMonth = (newDate.getMonth() + 1) < 10 ?'0' + (newDate.getMonth() + 1) : (newDate.getMonth() + 1);
	// 今天
	const newDay = newDate.getDate() < 10 ? '0' + newDate.getDate() : newDate.getDate();
	
	// 本月天数
	const newMaxDay = new Date(newYear, newMonth, 0).getDate();
	// 本周一的日期
	const newMonday = new Date(
		newDate.setDate(newDate.getDate() - newDate.getDay() + 1)
	).getDate();
	// 本周日的日期
	const newSunday = new Date(newDate.setDate(newDate.getDate() + 6)).getDate();

  const changeTime = (index) => {
    currentTag.value = index;
    if (index !== tags.value.length) {
      homeTimeText.value = tags.value[index];
      initTime(index);
      return;
    }
  }
	const initTime = (index) => {
		switch (index) {
      // 本周
			// case 1:
			// 	rangeValue.value[0] = `${newYear}-${newMonth}-${newMonday}`;
			// 	rangeValue.value[1] = `${newYear}-${newMonth}-${newSunday}`;
			// 	break;
      // 本月
			case 1:
				rangeValue.value[0] = `${newYear}-${newMonth}-01`;
				rangeValue.value[1] = `${newYear}-${newMonth}-${newMaxDay}`;
				break;
      // 累计
			case 2:
				rangeValue.value[0] = `${newYear}-01-01`;
				rangeValue.value[1] = `${newYear}-${newMonth}-${newDay}`;
				break;
      // 默认 今日
			default:
				rangeValue.value[0] = `${newYear}-${newMonth}-${newDay}`;
				rangeValue.value[1] = `${newYear}-${newMonth}-${newDay}`;
				break;
		}
	};



</script>

<style scoped lang="less">
.home-page-title {
  align-items: center !important;

  img {
    height: 30px;
  }

  .datetime {
    align-items: center;

    p {
      font-size: 20px;
      color: #415b73;
      margin-left: 20px;
      font-style: italic;
    }

    span {
      width: 64px;
      border-radius: 32px;
      padding: 4px 0;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 20px;
      color: #00a0e9;
      border: 1px solid #00a0e9;
      font-size: 14px;
      font-weight: 400;
      cursor: pointer;

      &.active {
        background: #00a0e9;
        color: #fff;
      }
    }
  }
}
</style>
